<template>
  <div style="padding: 30px 50px">
    <div>
      <div v-if="bzt != 6" class="bztBody">
        <el-steps :active="bzt" align-center>
          <el-step title="待支付" />
          <el-step title="待接单" />
          <el-step title="待派送" />
          <el-step title="派送中" />
          <el-step title="已完成" />
        </el-steps>
      </div>
      <div class="title">
        <el-divider direction="vertical" />
        收货地址
      </div>
      <div class="address-context" style="width: 80%">
        <div>
          <span>姓名：</span
          ><span style="color: rgb(45, 140, 240)">{{ order.consignee }}</span>
        </div>
        <div>
          <span>手机号:</span
          ><span style="color: rgb(45, 140, 240)">{{ order.phone }}</span>
        </div>
        <div>
          <span>收货地址：</span
          ><span style="color: rgb(45, 140, 240)">{{ order.address }}</span>
        </div>
      </div>
      <div style="margin-top: 20px" class="title">
        <el-divider direction="vertical" />
        订单信息
      </div>
      <div class="order-context">
        <div>
          <span>流水号：</span><span>{{ order.id }}</span>
        </div>
        <div style="margin-left: 70px">
          <span>订单状态:</span>
          <span v-if="order.status == '0'" style="color: rgb(167, 167, 80)"
            >待支付</span
          >
          <span v-if="order.status == '1'" style="color: rgb(47, 186, 233)"
            >待商家接单</span
          >
          <span v-if="order.status == '2'" style="color: blue">待派送</span>
          <span v-if="order.status == '3'" style="color: rgb(245, 17, 150)"
            >已派送</span
          >
          <span v-if="order.status == '4'" style="color: rgb(75, 75, 253)"
            >已完成</span
          >
          <span v-if="order.status == '5'" style="color: red">失败订单</span>
        </div>
        <div style="margin-left: 70px">
          <span>总金额(元):</span
          ><span
            :style="
              order.amount >= 100 ? 'color:red' : 'color: rgb(45, 140, 240);'
            "
            >{{ order.amount }}</span
          >
        </div>

        <br />
        <div >
          <span>总份数：</span
          ><span
            :style="
              order.totalCopies >= 5 ? 'color:red' : 'color: rgb(45, 140, 240)'
            "
            >{{ order.totalCopies }}</span
          >
        </div>

        
        <div style="margin-left: 70px" v-if="order.remark">
          <span>备注：</span><span>{{ order.remark }}</span>
        </div>

        <div
          :style="order.remark ? 'margin-left: 70px' : ''"
          v-if="order.cancelMsg != null"
        >
          <span>取消原因：</span>
          <span v-show="order.remark == 0" :label="0">不想要了/临时有事</span>
          <span v-show="order.remark == 1" :label="1"
            >点错了/点多了/点少了</span
          >
          <span v-show="order.remark == 2" :label="2">地址/电话填错了</span>
        </div>

        <div
          style="margin-left: 70px"   
        >
          <span>下单时间：</span><span>{{ order.orderTime }}</span>
        </div>
      </div>

      <el-dialog width="35%" title="支付服务费" v-model="bankDialog">
        <div v-if="banksList.length == 0" class="bodyBank">
          <div style="padding: 50px 30px">
            <span>账户信息</span>：
            <span>暂无账户信息，</span>
            <span
              style="color: red; cursor: pointer; font-weight: 600"
              @click="toAccount()"
              >添加账户信息
            </span>

            <div></div>
          </div>
        </div>
        <div v-if="!banksList.length == 0" class="bodyBank">
          <div style="padding: 20px 20px">
            <!-- <div class="dialogBank" >
              选择收货地址：
            
            </div> -->
            <el-form width="20%" label-width="103" :model="order">
              <el-form-item label="支付方式:">
                <el-radio-group v-model="order.payMethod">
                  <el-radio :label="0">网银支付</el-radio>
                  <el-radio :label="1">微信</el-radio>
                  <el-radio :label="2" disabled>支付宝</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="支付费用(元):">
                <el-input v-model="order.amount" disabled></el-input>
              </el-form-item>

              <el-form-item v-if="order.payMethod == 1" label="收款码:">
                <img src="../../../assets/order/skm.png" />
              </el-form-item>

              <el-form-item v-if="order.payMethod == 0" label="支付账号:">
                <el-select
                  v-model="bank"
                  style="width: 100%"
                  @change="
                    displayAccount =
                      bank.bankName +
                      ' ------  ' +
                      '...' +
                      bank.bankCardNumber.substring(4, 0)
                  "
                >
                  <el-option
                    v-for="item in banksList"
                    :value="item"
                    :key="item.id"
                    :label="displayAccount"
                  >
                    <span style="float: left">{{ item.bankName }}</span>
                    <span
                      style="
                        float: right;
                        color: var(--el-text-color-secondary);
                        font-size: 13px;
                      "
                    >
                      {{ item.bankCardNumber }}
                    </span></el-option
                  >
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="payFwf()">
              {{ "确认支付" }}
            </el-button>
            <el-button @click="bankDialog = false">取消</el-button>
          </div>
        </template>
      </el-dialog>

      <div class="orderImage">
        <img v-show="order.status == '0'" src="../../../assets/order/dzf.png" />
        <img v-show="order.status == '1'" src="../../../assets/order/djd.png" />
        <img v-show="order.status == '2'" src="../../../assets/order/dps.png" />
        <img v-show="order.status == '3'" src="../../../assets/order/psz.png" />
        <img v-show="order.status == '4'" src="../../../assets/order/ywc.png" />
        <img
          v-show="order.status == '5'"
          src="../../../assets/order/orderFail.png"
        />
      </div>

      <div style="margin-top: 20px" class="title">
        <el-divider direction="vertical" />
        菜品套餐信息
      </div>
      <div
        :style="
          order.status == '0'
            ? 'padding: 30px 30px 0 30px'
            : 'padding: 30px 30px '
        "
        class="dishFlavor-body"
      >
        <el-table
          :data="order.orderDetails"
          border
          stripe
          :header-cell-style="{
            'text-align': 'center',
            color: '#515a6e',
            background: '#eff5ff',
            height: '50px',
          }"
          :cell-style="{ 'text-align': 'center' }"
          style="font-size: 16px; border-radius: 8px"
        >
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column label="金额(元)" width="150">
            <template #default="scope">
              <span :style="scope.row.money >= 100 ? 'color:red' : ''">{{
                scope.row.money
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="份数" width="150">
            <template #default="scope">
              <span :style="scope.row.copies >= 5 ? 'color:red' : ''">{{
                scope.row.copies
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="图片" width="150">
            <template #default="scope">
              <div class="demo-image__preview">
                <el-image
                  style="width: 30px; height: 30px"
                  :src="scope.row.photo"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[scope.row.photo]"
                  :initial-index="4"
                  fit="cover"
                  preview-teleported="true"
                />
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="口味喜好"
            prop="dishFlavor"
            width="300"
          ></el-table-column>

          ></el-table
        >

        <div v-if="order.status == '0'" class="readBody">
          <span
            ><a
              style="color: #6598fe"
              target="_blank"
              href="https://pic.cuohepai.com/chp_soft/websit/other/shanghai/SH%E6%8A%80%E6%9C%AF%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE.pdf"
              >《保证承诺书》</a
            ></span
          >
          <div>
            <el-checkbox
              v-model="checked"
              label="我已认真阅读以上协议并同意签署"
              size="large"
            />
          </div>
        </div>
      </div>
      <div style="text-align: center; margin-top: 40px">
       
        <el-button
          v-if="order.status == '0'"
          style="width: 150px"
          type="primary"
          @click="payMenoy()"
        >
          支付费用</el-button
        >
        <el-button
          v-if="order.status == '0' || order.status == '1'"
          style="width: 150px"
          type="danger"
          @click="cancelDialog = true"
        >
          取消订单</el-button
        >
        <el-button @click="refresh()" type="success" style="width: 150px">
          刷新列表</el-button
        >
        <el-button @click="backTabel()" style="width: 150px"> 返回</el-button>
      </div>
      <el-dialog
        v-model="cancelDialog"
        center
        :close-on-click-modal="false"
        @close="dialogColse(reasonRef)"
        title="取消订单"
        width="25%"
      >   
        <el-form ref="reasonRef" :model="reasonData">
          <el-form-item label-width="100" label="取消订单:">
            <el-radio-group v-model="isCancel"
              ><el-radio :label="0">是</el-radio
              ><el-radio :label="1">否</el-radio></el-radio-group
            >
          </el-form-item>
          <el-form-item
            prop="reason"
            v-if="isCancel == 0"
            label-width="100"
            label="取消原因:"
            :rules="{
              required: true,
              message: '请选择取消原因',
              trigger: 'change',
            }"
          >
            <!-- <el-input v-model="reasonData.reason" placeholder="请选择取消原因"></el-input> -->
            <el-select v-model="reasonData.reason" placeholder="请选择取消原因">
              <el-option
                v-for="(item, index) in cancelMsgs"
                :label="item.label"
                :key="index"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span>
            <el-button type="primary" @click="cancelOrder(reasonRef)">
              确认
            </el-button>
            <el-button @click="(cancelDialog = false), (reasonData.reason = '')"
              >取消</el-button
            >
          </span>
        </template></el-dialog
      >
    </div>
  </div>
</template>

<script >
import { reactive, toRefs, h } from "vue";
import { useRoute, useRouter } from "vue-router";
import { detail, orderStatus } from "@/api/order";
import { ElMessage } from "element-plus";
import { list } from "@/api/account";
import { displayBoxInfo } from "@/utils/msg";
import { ElMessageBox } from "element-plus";
import router from "@/router/index";

export default {
  name: "orderDetail",
  setup(props) {
    const route = new useRoute();
    let data = reactive({
      bzt: 0,
      order: "",
      reasonData: {
        reason: "",
      },
      reasonRef: "",
      isCancel: 0, //是否取消订单
      checked: "", //是否阅读并签署
      bankDialog: false, //银行卡支付dialog
      cancelDialog: false, //取消订单dialog
      banksList: [], //银行卡绑定列表
      bank: "", //选定的支付账号
      displayAccount: "", //显示的账号
      cancelMsgs: [
        { value: 0, label: "不想要了/临时有事" },
        { value: 1, label: "点错了/点多了/点少了" },
        { value: 2, label: "地址/电话填错了" },
      ],
    });

    let dialogColse = (formEl) => {
      if (!formEl) return;
      formEl.resetFields();
    };

    //打开支付服务费页面
    let payMenoy = () => {
      if (!data.checked) {
        ElMessage({
          message: "请先阅读协议并同意签署",
          type: "warning",
        });
      } else {
        list({ id: JSON.parse(localStorage.getItem("userInfo")).id }).then(
          (res) => {
            data.banksList = res.data;
            data.bank = res.data[0];
            data.displayAccount =
              res.data[0].bankName +
              " ------  " +
              "..." +
              res.data[0].bankCardNumber.substring(4, 0);
            console.log(data.displayAccount);
            data.bankDialog = true;
          }
        );
      }
    };

    let payFwf = () => {
      if (data.order.status == 0) {
        var status = 1;
      }
      if (data.order.payMethod == 0) {
        let params = {
          id: data.order.id,
          bankId: data.bank.id,
          payMethod: data.order.payMethod,
          status: status,
        };
        orderStatus(params).then((res) => {
          displayBoxInfo(res.code, res.msg);
          if (res.code == 1) {
            data.bankDialog = false;
            router.push({ name: "order" });
          }
        });
      }
    };

    let cancelOrder = (formEl) => {
      console.log(4564);
      if (!formEl) return;
      console.log(1111);

      formEl.validate((valid, fields) => {
        console.log(2222);
        if (valid) {
          if (data.isCancel == 0) {
            let params = {
              id: data.order.id,
              status: "5",
              cancelMsg: data.reasonData.reason,
            };
            orderStatus(params).then((res) => {
              displayBoxInfo(res.code, res.msg);
              if (res.code == 1) {
                data.cancelDialog = false;
                orderXq();
              }
            });
          } else {
            (data.cancelDialog = false), (data.reasonData.reason = "");
          }
        } else {
          console.log(fields);
        }
      });

      // if (data.isCancel == 1) {
      //   let params = {
      //     id: data.order.id,
      //     status: "5",
      //     cancelMsg: data.reasonData.reason,
      //   };
      //   orderStatus(params).then((res) => {
      //     displayBoxInfo(res.code, res.msg);
      //     if (res.code == 1) {
      //       data.cancelDialog = false;
      //       orderXq();
      //     }
      //   });
      // } else {
      //   (data.cancelDialog = false), (data.reasonData.reason = "");
      // }
    };

    let backTabel = () => {
      router.go(-1);
    };

    //刷新界面
    let refresh = () => {
      detail({ id: data.order.id }).then((res) => {
        data.order = res.data;
        data.bzt = Number(data.order.status) + 1;
      });
    };

    //跳转至添加账户页面
    let toAccount = () => {
      router.push({ name: "account" });
    };

    let orderXq = () => {
      detail({ id: route.query.id }).then((res) => {
        data.order = res.data;
        data.bzt = Number(data.order.status) + 1;
      });
    };
    orderXq();

    return {
      ...toRefs(data),
      payMenoy,
      payFwf,
      toAccount,
      cancelOrder,
      backTabel,
      dialogColse,
      refresh,
    };
  },
};
</script>

<style scope>
.bztBody {
  height: 80px;
  /* border: 1px solid red; */
  text-align: center;
}

.title {
  font-weight: 800;
  font-size: 16px;
}
.el-divider--vertical {
  border-left: 9px #6492ff var(--el-border-style);
}

.address-context {
  box-shadow: 0 0 5px 5px hsla(0, 0%, 78.4%, 0.3);
  margin-top: 20px;
  padding: 32px 32px 32px 32px;
  border-radius: 8px;
  background-color: #fff;
  justify-content: space-between;
  display: flex;
  font-weight: 600;
  color: #515a6e;
}
.order-context {
  box-shadow: 0 0 5px 5px hsla(0, 0%, 78.4%, 0.3);
  margin-top: 20px;
  padding: 32px 32px 32px 32px;
  border-radius: 8px;
  background-color: #fff;
  /* justify-content: space-between; */
  /* display: flex; */
  font-weight: 600;
  color: #515a6e;
  width: 80%;
}

.order-context div {
  display: inline;
  line-height: 40px;
}

.dishFlavor-body {
  margin-top: 20px;
  box-shadow: 0 0 5px 5px hsla(0, 0%, 78.4%, 0.3);
  border-radius: 8px;
}

.readBody {
  /* border: 1px solid red; */
  /* height: 50px; */
  font-size: 14px;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  padding: 20px 0;
  text-align: center;
  background: #f5f5f5;
  width: 70%;
  margin: 0 auto;
  border-radius: 8px;
}

.orderImage {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 42%;
  right: 24%;
  z-index: 170;
}

.bodyBank {
  margin-bottom: 20px;
  box-shadow: 0 0 5px 5px hsla(0, 0%, 78.4%, 0.2);
}

.el-dialog__body {
  padding: 25px 30px;
}

.el-dialog__title {
  font-weight: 600 !important;
  color: #122649;
}
.el-dialog__header {
  border-bottom: 1px solid #ddd !important;
  margin-left: 30px;
  padding-left: 0px !important;
}
</style>